<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        #app{
            /* 父元素定义 transform: translate 样式，会导致内部的  fixed 元素失去固定定位效果 ，转变为绝对定位效果*/
            transform: translate(0,0);
        }
        .ad{
            position: fixed;
            top: 0px;
            left:0px;
            width: 100%;
            line-height: 2;
            background-color: bisque;
            text-align: center;
            color: brown;
        }
    </style>
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        穿梭组件(vue3) : vue容器中定义的元素标签，在保留容器内部vue语法功能的同时，可以被渲染在页面指定位置
            + 通过定义 to 属性取值 CSS选择器 完成标签的选择区域渲染操作
            + 通过属性 disabled 取值 boolean 控制渲染容器的选择【默认值为false标签切换容器渲染;取值为true表示原位置渲染】
        </pre>
        
        <input type="button" value="切换渲染区域" @click="flag=!flag">
        <Teleport to="#root" :disabled="flag">
            <h5>标题标签：{{ msg }}</h5>
            <input v-model="msg" type="text" />
        </Teleport>

        <teleport to="body">
            <div class="ad">
                广告：{{ info }}
            </div>
        </teleport>

    </div>
    <div id="root"></div>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                   msg:"msg变量",
                   flag:false,
                   info:"广告文案"
                }
            }
        }).mount("#app");
    </script>
    
</body>
</html>